<template>
    <div id="temp">
        <div class="stuInfo">
            <div class="tit">
                <span>招聘/入职手续详情</span>
                <span class="icon" @click="edit(id,'procedure')"></span>
            </div>
            <el-row>
                <el-col :span="8">
                    <div>
                        <el-col :span="10">
                            <span class="left">姓名：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{procedureData.name}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">联系方式：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{procedureData.contact_way}}</span>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-col :span="10">
                            <span class="left">学历：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{procedureData.education_background}}</span>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="10">
                            <span class="left">状态：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{procedureData.status}}</span>
                        </el-col>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <el-col :span="10">
                            <span class="left">应聘职务：</span>
                        </el-col>
                        <el-col :span="14">
                            <span class="right">{{procedureData.duty}}</span>
                        </el-col>
                    </div>
                </el-col>

            </el-row>
        </div>
        <div class="record">
            <el-tabs type="border-card" @tab-click="formChange" activeName="resume">
                <el-tab-pane label="简历" name="resume">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th width="20%">
                                <span class="icon add" @click="openAddForm('resume')"></span>
                            </th>
                            <th>名称</th>
                            <th>上传日期</th>
                            <th>下载</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in list" :key="item.id">
                            <td width="15%">
                                <span class="icon del" @click="Del(item.id,'resume')"></span>
                            </td>
                            <td>{{item.name}}</td>
                            <td>{{item.date}}</td>
                            <td>
                                <el-button type="primary" @click="download(item.id)">下载</el-button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="入职手续" name="entry">
                    <table class="tab-table">
                        <thead>
                        <tr>
                            <th width="20%">
                                <span class="icon add" @click="openAddForm('entry')"></span>
                            </th>
                            <th>名称</th>
                            <th>上传日期</th>
                            <th>下载</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in list" :key="item.id">
                            <td width="15%">
                                <span class="icon del" @click="Del(item.id,'entry')"></span>
                            </td>
                            <td>{{item.name}}</td>
                            <td>{{item.date}}</td>
                            <td>
                                <el-button type="primary" @click="download(item.id)">下载</el-button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="招聘/入职信息" :visible.sync="procedurePop" size="tiny">
            <el-form :model="procedureAdd" ref="procedureRulesName" label-width="200px" :rules="procedureRules">
                <el-form-item label="姓名" prop="name">
                    <el-col :span="15">
                        <el-input v-model="procedureAdd.name" size="small" placeholder="请输入姓名"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="学历">
                    <el-col :span="15">
                        <el-input v-model="procedureAdd.education_background" size="small"
                                  placeholder="请输入学历"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="应聘职务">
                    <el-col :span="15">
                        <el-select v-model="procedureAdd.duty" placeholder="请选择" size="small">
                            <el-option v-for="item in staffType" :label="item.name" :value="item.name"
                                       :key="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-col :span="15">
                        <el-input v-model="procedureAdd.contact_way" size="small" placeholder="请输入联系方式"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-col :span="15">
                        <el-input v-model="procedureAdd.status" size="small" placeholder="请输入状态"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('procedure')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="上传简历" :visible.sync="resumePop" size="tiny">
            <el-form :model="files" ref="filse" labelWidth="80px">
                <el-form-item label="名称">
                    <el-input type="text" v-model="files.name"></el-input>
                </el-form-item>
                <el-form-item label="简历名称">
                    <el-upload class="upload-demo" ref="upload" :action="fileAction" :on-change="fileUploadChange"
                               :file-list="fileList" :auto-upload="false" :on-success="fileUploadSuccess"
                               :on-remove="fileRemove" :data="uploadData" name="resume">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitfiles()" :disabled="subDisabled">提 交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="入职手续" :visible.sync="entryPop" size="tiny">
            <el-form :model="files" ref="filse" labelWidth="80px">
                <el-form-item label="名称">
                    <el-input type="text" v-model="files.name"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-upload class="upload-demo" ref="upload" :action="fileAction" :on-change="fileUploadChange"
                               :file-list="fileList" :auto-upload="false" :on-success="fileUploadSuccess"
                               :on-remove="fileRemove" :data="uploadData" name="entry">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitfiles()" :disabled="subDisabled">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";

    const procedure = {
        name: '',
        education_background: '',
        duty: '',
        contact_way: '',
        status: ''
    };
    const file = {
        name: '',
    };
    export default {
        components: {ElButton},
        data() {
            return {
                id: '',
                procedurePop: false,
                resumePop: false,
                entryPop: false,
                list: {},
                procedureAdd: _g.cloneJson(procedure),
                procedureRules: {
                    name: [{required: true, message: "请填写姓名", trigger: "blur"}]
                },
                staffType: [],
                procedureData: {},
                files: _g.cloneJson(file),
                uploadData: {
                    name: '',
                    pid: ''
                },
                fileList: [],
                fileAction: PATH + 'Operation/updateProcedureFile',
                subDisabled: true,
            }
        },

        created() {
            this.id = this.$route.params.id;
            this.getDetail();
            this.getTypes();
            this.getList('resume');
        },

        methods: {
            formChange(item) {
                this.getList(item.name);
            },
            getDetail() {
                let data = {id: this.id};
                this.apiPost("Operation/procedureDetail", data).then(res => {
                    this.procedureData = res;
                });
            },
            getTypes() {
                this.apiPost("System/staffTypeLists",).then(res => {
                    this.staffType = res;
                });
            },
            getList(name) {
                let data = {pid: this.id};
                this.apiPost("Operation/" + name, data).then(res => {
                    this.list = res;
                });
            },

            Del(id, action) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let data = {id: id};
                        this.apiPost("Operation/" + action + "Del", data).then(res => {
                            if (!res.error) {
                                this.$message({
                                    type: "success",
                                    message: res.msg
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                });
                            }
                            this.getList(action);
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },

            download(id) {
                window.location.href = PATH + "Operation/downloadFile/id/" + id;
            },

            edit(id, action) {
                let data = {id: id};
                this.apiPost('Operation/' + action + 'Detail', data).then(res => {
                    setTimeout(() => {
                        this[action + 'Pop'] = true;
                        setTimeout(() => {
                            this.$refs[action + 'RulesName'].resetFields();
                            this[action + 'Add'] = res;
                        }, 0);
                    }, 0);
                })
            },

            openAddForm(name) {
                this.files = _g.cloneJson(file);
                this.fileList = [];
                setTimeout(() => {
                    this[name + 'Pop'] = true;
                }, 0);
            },

            submitForm(action) {
                this.$refs[action + 'RulesName'].validate((valid) => {
                    if (valid) {
                        this[action + 'Pop'] = false;
                        let data = this[action + 'Add'];
                        this.apiPost("Operation/" + action + 'Edit', data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                if (action === 'procedure') {
                                    this.getDetail();
                                } else {
                                    this.getList(action);
                                }
                            } else {
                                this[action + 'Pop'] = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },

            /* 图片上传 */
            fileUploadChange(file, fileList) {
                if (fileList.length > 1) {
                    _g.toastMsg('warning', '每次限上传一个文件')
                }
                this.subDisabled = fileList.length !== 1;
            },
            fileRemove(file, fileList) {
                this.subDisabled = fileList.length !== 1;
            },
            fileUploadSuccess(res) {
                _g.closeGlobalLoading();
                let remind = res.error ? 'error' : 'success';
                _g.toastMsg(remind, res.msg);
                if (!res.error) {
                    this[res.name + 'Pop'] = false;
                    this.getList(res.name);
                } else {
                    return false;
                }
            },
            submitfiles(name) {
                this.uploadData.name = this.files.name;
                this.uploadData.pid = this.id;
                setTimeout(() => {
                    this.$refs.upload.submit();
                }, 0)
            },
        }
    }
</script>

<style scoped>
    .stuInfo {
        padding: 0 0 0 50px;
        margin-bottom: 20px;
    }

    .stuInfo .headPic img {
        width: 55%;
    }

</style>